import {
  Card,
  Typography,
  Row,
  Col,
  Timeline,
  Space,
  Tag,
  Divider,
  message,
} from "antd";
import { useEffect } from "react";
import { getSpringTest } from "../api/request";
import { useTheme } from "../contexts/ThemeContext";
import {
  InfoCircleOutlined,
  TeamOutlined,
  TrophyOutlined,
  RocketOutlined,
  BugOutlined,
  ToolOutlined,
  HeartOutlined,
  GithubOutlined,
  MailOutlined,
} from "@ant-design/icons";

const { Title, Paragraph, Text } = Typography;

export default function About() {
  const { isDarkMode } = useTheme();

  // 页面挂载时请求后端接口，遇到 401 自动跳转
  useEffect(() => {
    getSpringTest().catch((err) => {
      if (err?.response?.status === 401) {
        // 401 跳转由拦截器处理
      } else {
        message.error("后端接口请求失败");
      }
    });
  }, []);

  return (
    <div style={{ maxWidth: 1200, margin: "20px auto", padding: "0 16px" }}>
      {/* 页面标题 */}
      <div style={{ textAlign: "center", marginBottom: 32 }}>
        <Title level={2} style={{ color: "#1890ff", marginBottom: 8 }}>
          <InfoCircleOutlined /> 关于系统
        </Title>
        <Paragraph style={{ fontSize: 16, color: "#666" }}>
          华师计算机学院IT智能博客推荐与知识问答系统
        </Paragraph>
      </div>
      <Card
        style={{
          maxWidth: 1000,
          margin: "20px auto",
          borderRadius: 12,
          boxShadow: isDarkMode
            ? "0 2px 12px rgba(0,0,0,0.3)"
            : "0 2px 12px #eee",
          backgroundColor: isDarkMode ? "#1f1f1f" : "#ffffff",
          borderColor: isDarkMode ? "#434343" : "#d9d9d9",
          transition: "all 0.3s ease",
        }}>
        <div style={{ marginBottom: 40 }}>
          <Title level={3} style={{ marginBottom: 16 }}>
            <RocketOutlined /> 系统介绍
          </Title>
          <Paragraph style={{ fontSize: 16, lineHeight: 1.8 }}>
            本系统是面向华南师范大学计算机学院打造的IT智能博客推荐与知识问答平台，
            系统采用基于微服务架构、多框架实现的技术方案，集成了检索增强生成（RAG）问答技术和智能推荐算法，
            旨在通过技术趋势分析与多框架微服务对比，提升师生获取技术知识的效率与教学科研协同能力。
          </Paragraph>
          <Paragraph style={{ fontSize: 16, lineHeight: 1.8 }}>
            数据采集与存储：系统首先通过Scrapy爬虫从CSDN等平台采集IT技术博客数据，
            实现了多层次的数据存储方案——MySQL作为核心关系型数据库存储结构化数据，
            ElasticSearch提供全文检索能力，PostgreSQL通过pgvector扩展用于RAG的向量存储以支持语义检索，
            Redis实现缓存与会话加速，MongoDB负责操作日志与交互日志的持久化存储以便审计与追踪。
          </Paragraph>
          <Paragraph style={{ fontSize: 16, lineHeight: 1.8 }}>
            异步消息与大数据分析：引入RabbitMQ异步消息队列处理数据流转、任务调度与系统解耦，
            通过Hadoop生态（HDFS、Hive）构建离线数据仓库，进行技术热词趋势、领域分布等大数据分析。
          </Paragraph>
          <Paragraph style={{ fontSize: 16, lineHeight: 1.8 }}>
            RAG大模型问答：采用LangChain构建Agent框架，通过ReAct推理模式集成工具调用能力。系统设计三层递进式问答流程：
            第一层通过SQL工具调用获取数据库结构信息与查询结果；第二层基于RAG流水线进行文章内容检索增强，包括递归字符分割、Gemini嵌入模型向量化、PostgreSQL
            pgvector存储与相似度检索；
            第三层通过智能路由机制判断问题属性，自动选择Agent数据库查询或RAG文章检索，最终由大模型整合上下文生成答案，支持多轮对话与上下文记忆。
          </Paragraph>
          <Paragraph style={{ fontSize: 16, lineHeight: 1.8 }}>
            多框架微服务与治理：系统采用Spring
            Boot、Gin、NestJS、FastAPI四种框架实现微服务，进行性能与开发效率对比研究，
            引入Nacos实现服务发现与配置管理，通过SpringCloud
            Gateway网关进行路由与JWT身份验证。
          </Paragraph>
        </div>

        <Row gutter={[24, 24]} style={{ marginBottom: 40 }}>
          <Col xs={24} md={12}>
            <Card size="small" style={{ height: "100%" }}>
              <Title level={4}>
                <ToolOutlined /> 技术架构
              </Title>
              <div style={{ marginBottom: 16 }}>
                <Text strong>前端技术栈：</Text>
                <br />
                <Space wrap style={{ marginTop: 8 }}>
                  <Tag color="blue">React 18</Tag>
                  <Tag color="green">Ant Design</Tag>
                  <Tag color="orange">React Router</Tag>
                  <Tag color="cyan">Axios</Tag>
                </Space>
              </div>
              <div style={{ marginBottom: 16 }}>
                <Text strong>后端框架：</Text>
                <br />
                <Space wrap style={{ marginTop: 8 }}>
                  <Tag color="red">Spring Boot</Tag>
                  <Tag color="cyan">Gin</Tag>
                  <Tag color="geekblue">NestJS</Tag>
                  <Tag color="gold">FastAPI</Tag>
                </Space>
              </div>
              <div style={{ marginBottom: 16 }}>
                <Text strong>AI 与 RAG 工具：</Text>
                <br />
                <Space wrap style={{ marginTop: 8 }}>
                  <Tag color="geekblue">LangChain</Tag>
                  <Tag color="purple">向量数据库</Tag>
                  <Tag color="gold">LLM</Tag>
                </Space>
              </div>
              <div style={{ marginBottom: 16 }}>
                <Text strong>数据存储：</Text>
                <br />
                <Space wrap style={{ marginTop: 8 }}>
                  <Tag color="volcano">MySQL</Tag>
                  <Tag color="blue">PostgreSQL</Tag>
                  <Tag color="magenta">MongoDB</Tag>
                  <Tag color="lime">Redis</Tag>
                  <Tag color="red">ElasticSearch</Tag>
                </Space>
              </div>
              <div>
                <Text strong>大数据与基础设施：</Text>
                <br />
                <Space wrap style={{ marginTop: 8 }}>
                  <Tag color="purple">Hadoop</Tag>
                  <Tag color="yellow">RabbitMQ</Tag>
                  <Tag color="red">Nacos</Tag>
                  <Tag color="green">Docker</Tag>
                  <Tag color="pink">Nginx</Tag>
                  <Tag color="blue">Gateway</Tag>
                </Space>
              </div>
            </Card>
          </Col>
          <Col xs={24} md={12}>
            <Card size="small" style={{ height: "100%" }}>
              <Title level={4}>
                <TrophyOutlined /> 系统特色
              </Title>
              <ul style={{ lineHeight: 2 }}>
                <li>基于LangChain的RAG检索增强生成问答流水线</li>
                <li>向量检索与全文检索混合召回</li>
                <li>智能推荐算法（内容+协同+混合）</li>
                <li>多框架微服务实现与对比</li>
                <li>Hadoop生态离线数据分析</li>
                <li>技术热词趋势与领域聚类分析</li>
                <li>Scrapy爬虫数据采集与清洗</li>
                <li>WebSocket实时聊天互动</li>
                <li>统一网关与JWT身份验证，使用Nacos进行服务发现与配置治理</li>
                <li>RabbitMQ异步消息队列用于任务调度与解耦</li>
                <li>Redis缓存与会话管理，加速检索与上下文存储</li>
                <li>操作与对话日志写入MongoDB以便审计与故障排查</li>
                <li>微服务性能监控与对比评估</li>
              </ul>
            </Card>
          </Col>
        </Row>

        <div style={{ marginBottom: 40 }}>
          <Title level={3} style={{ marginBottom: 16 }}>
            <TeamOutlined /> 研发历程
          </Title>
          <Timeline
            items={[
              {
                color: "green",
                children: (
                  <div>
                    <Text strong>需求分析与架构设计</Text>
                    <br />
                    <Text type="secondary">
                      确定微服务架构方案，完成技术选型与原型设计
                    </Text>
                  </div>
                ),
              },
              {
                color: "blue",
                children: (
                  <div>
                    <Text strong>数据采集与存储</Text>
                    <br />
                    <Text type="secondary">
                      Scrapy爬虫搭建，CSDN数据采集，MySQL/MongoDB/ES索引构建
                    </Text>
                  </div>
                ),
              },
              {
                color: "red",
                children: (
                  <div>
                    <Text strong>推荐与搜索模块</Text>
                    <br />
                    <Text type="secondary">
                      ES全文检索，PostgreSQL向量检索，推荐算法实现与优化
                    </Text>
                  </div>
                ),
              },
              {
                color: "purple",
                children: (
                  <div>
                    <Text strong>RAG问答系统</Text>
                    <br />
                    <Text type="secondary">
                      基于LangChain构建Agent框架：SQL工具调用、文章RAG检索、多轮对话上下文管理
                    </Text>
                  </div>
                ),
              },
              {
                color: "orange",
                children: (
                  <div>
                    <Text strong>多框架微服务实现</Text>
                    <br />
                    <Text type="secondary">
                      Spring Boot、Gin、NestJS、FastAPI开发各功能模块
                    </Text>
                  </div>
                ),
              },
              {
                color: "cyan",
                children: (
                  <div>
                    <Text strong>大数据分析</Text>
                    <br />
                    <Text type="secondary">
                      Hadoop+Hive离线数仓构建，技术趋势与领域聚类分析
                    </Text>
                  </div>
                ),
              },
              {
                color: "gold",
                children: (
                  <div>
                    <Text strong>系统集成与性能测试</Text>
                    <br />
                    <Text type="secondary">
                      Gateway网关集成，多框架性能对比评估与系统优化；引入Nacos治理、RabbitMQ解耦、Redis缓存与MongoDB日志存储
                    </Text>
                  </div>
                ),
              },
            ]}
          />
        </div>

        <Divider />

        <div style={{ textAlign: "center", padding: "24px 0" }}>
          <Title level={4} style={{ marginBottom: 16 }}>
            <HeartOutlined /> 系统价值
          </Title>
          <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
            <Col xs={24} md={8}>
              <div>
                <BugOutlined
                  style={{ fontSize: 32, color: "#1890ff", marginBottom: 12 }}
                />
                <br />
                <Text strong style={{ fontSize: 16 }}>
                  教育价值
                </Text>
                <Paragraph style={{ marginTop: 8 }}>
                  提供个性化IT技术学习推荐与智能化问答支持，辅助学生自主学习与技术探讨
                </Paragraph>
              </div>
            </Col>
            <Col xs={24} md={8}>
              <div>
                <ToolOutlined
                  style={{ fontSize: 32, color: "#52c41a", marginBottom: 12 }}
                />
                <br />
                <Text strong style={{ fontSize: 16 }}>
                  技术价值
                </Text>
                <Paragraph style={{ marginTop: 8 }}>
                  验证RAG、微服务等技术在IT领域应用效果，系统对比多框架性能与开发效率
                </Paragraph>
              </div>
            </Col>
            <Col xs={24} md={8}>
              <div>
                <RocketOutlined
                  style={{ fontSize: 32, color: "#fa8c16", marginBottom: 12 }}
                />
                <br />
                <Text strong style={{ fontSize: 16 }}>
                  实践价值
                </Text>
                <Paragraph style={{ marginTop: 8 }}>
                  提供可复用的多存储、微服务、异步队列与AI集成方案，为技术选型提供实验依据
                </Paragraph>
              </div>
            </Col>
          </Row>
          <Paragraph style={{ marginTop: 24, marginBottom: 0, fontSize: 16 }}>
            基于微服务架构与多框架实现，探索IT技术知识共享的智能化解决方案
          </Paragraph>
        </div>
      </Card>
    </div>
  );
}
